<template>
    <div>
        <el-scrollbar wrap-class="scrollbar-wrapper">
            <el-menu
                :default-active="activeMenu"
                :unique-opened="false"
                :active-text-color="variables.menuActiveText"
                :collapse-transition="false"
                mode="vertical"
                background-color="#304156"
                text-color="#fff"
            >
                <sidebar-item
                    v-for="route in permission_routes"
                    :key="route.path"
                    :item="route"
                    :base-path="route.path"
                />
            </el-menu>
        </el-scrollbar>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'

export default {
    components: { SidebarItem },
    computed: {
        ...mapGetters(['permission_routes']),
        activeMenu() {
            const route = this.$route
            const { meta, path } = route
            // 默认激活项
            if (meta.activeMenu) {
                return meta.activeMenu
            }
            return path
        },
        variables() {
            return {
                menuText: '#bfcbd9',
                menuActiveText: '#409EFF',
                menuBg: '#304156',
            }
        },
    },
}
</script>